<template>
        <structureMain>
                <template #main>
                        <div style="overflow-x: hidden;">
                                <div class="head">
                                        <unitTable style="margin: 10px;margin-top: 80px;margin-left: 20px;" :id="route.query.id"
                                                :unitmodel="pumpingData.unitModel" :unittype="pumpingData.unitType"
                                                :productionDate="pumpingData.productionDate" :deploymentDate="pumpingData.deploymentDate">
                                        </unitTable>
                                        <img src="@/assets/pumpingunit.png" alt="" class="img">
                                        <div>
                                                <flow :flow1="pumpingData.production"></flow>
                                                <unit :id="route.query.id" :unitStatus="pumpingData.unitStatus"></unit>
                                        </div>
                                </div>
                                <div class="graph">
                                        <div class="leftarea">
                                                <h2>近期产量及井下压强</h2>
                                                <unitEcharts style="margin-left: 20px;"></unitEcharts>
                                        </div>
                                        <div>
                                                <h1>近七日运转记录</h1>
                                                <runTable style="margin-left: 25px;" :runTableData="runTableData"></runTable>
                                        </div>
                                </div>
                        </div>
                </template>
        </structureMain>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import structureMain from '@/components/structureMain.vue'
import unit from '@/components/pumpUnit/unit.vue'
import unitTable from '@/components/unitDetails/unitTable.vue'
import flow from '@/components/unitDetails/flow.vue'
import runTable from '@/components/unitDetails/runTable.vue'
import unitEcharts from '@/components/unitDetails/unitEcharts.vue'
import { pagedetail } from '@/api/unit'
import { useRoute } from 'vue-router';

let route =useRoute()

defineProps(['id'])


onMounted(() => {     
        detailById() 
})

let pumpingData = ref({
        unitStatus: ref(),
        production: ref(),
        unitModel: ref(''),
        unitType: ref(),
        productionDate: ref(''),
        deploymentDate: ref('')
})

let runTableData=reactive([])

function detailById() {
        const id=route.query.id
        console.log(id)
        pagedetail(id).then((res) => {
                pumpingData.value=res.data.data.message.pumping
                runTableData=res.data.data.message.list
                console.log(pumpingData.value)
                console.log(runTableData)
        }).catch((error)=>{
                console.log(error)
        })
}
</script>
<style scoped>
.img {
        width: 400px;
        height: 300px;
        margin-left: 50px;
        margin-top: 70px;
}

.head {
        display: flex;
        overflow-x: hidden;
}

.graph {
        display: flex;
        width: auto;
        margin-left: 20px;
        margin-top: 20px
}

h2 {
        width: 10px;
        font-weight: 500;
        font-size: 20px;
}

.leftarea {
        display: flex;
        margin-top: 50px
}

h1 {
        margin-left: 50px;
        margin-bottom: 20px
}
</style>
